<template>
	<view :style="colorStyle">
		<view class="address-window" :class="address.address==true?'on':''">
			<view class='title'>{{$t(`选择地址`)}}<text class='iconfont icon-guanbi' @tap='close'></text></view>
			<view class='list'>
				<view class='item acea-row row-between-wrapper' :class='active==index?"font-num":""'
					v-for="(item,index) in addressList" @tap='tapAddress(index,item.id,item)' :key='index'>
					<text class='iconfont icon-ditu' :class='active==index?"font-num":""'></text>
					<view class='address'>
						<view class='name' :class='active==index?"font-num":""'>
							{{item.name || item.real_name}}
							<text class='phone'>{{item.phone}}</text>
							<!-- <text v-if="item.distance_hit" style="margin-left: 12rpx;color: #d43030;">距您{{ item.distance_hit }}</text> -->
						</view>
						<view class='line1' v-if="item.detailed_address">{{ item.address }}{{item.detailed_address}}</view>
						<view class='line1' v-else>{{item.province}}{{item.city}}{{item.district}}{{item.detail}}</view>
					</view>
					<text class='iconfont icon-complete' :class='active==index?"font-num":""'></text>
				</view>
			</view>
			<!-- 无地址 -->
			<view class='pictrue' v-if="!is_loading && !addressList.length">
				<image :src="imgHost + '/statics/images/noAddress.png'"></image>
			</view>
			<view class='addressBnt bg-color' v-if="listType != 'store'" @tap='goAddressPages'>{{$t(`选择其它地址`)}}</view>
		</view>
		<view class='mask' catchtouchmove="true" :hidden='address.address==false' @tap='close'></view>
	</view>
</template>

<script>
	import {
		getAddressList
	} from '@/api/user.js';
	import {storeListApi} from '@/api/store.js';
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import colors from "@/mixins/color";
	export default {
		props: {
			pagesUrl: {
				type: String,
				default: '',
			},
			address: {
				type: Object,
				default: function() {
					return {
						address: true,
						addressId: 0,
					};
				}
			},
			isLog: {
				type: Boolean,
				default: false,
			},
		},
		mixins: [colors],
		data() {
			return {
				imgHost: HTTP_REQUEST_URL,
				active: 0,
				//地址列表
				addressList: [],
				is_loading: true,
				listType: ''
			};
		},

		methods: {
			tapAddress: function(e, addressid, item) {
				this.active = e;
				let addressName = item.province + item.city + item.district + item.detail
				uni.setStorageSync('addressName',addressName)
				uni.setStorageSync('addressObj',item)
				this.$emit('OnChangeAddress', addressid);
			},
			close: function() {
				this.$emit('changeClose');
				this.$emit('changeTextareaStatus');
			},
			goAddressPages: function() {
				this.$emit('changeClose');
				this.$emit('changeTextareaStatus');
				uni.navigateTo({
					url: this.pagesUrl
				});
			},
			getAddressList: function(v) {
				this.listType = v
				if(v == 'store') {
					this.getStoreList()
					return
				}
				let that = this;
				getAddressList({
					page: 1,
					limit: 5
				}).then(res => {
					let addressList = res.data;
					//处理默认选中项
					for (let i = 0, leng = addressList.length; i < leng; i++) {
						if (addressList[i].id == that.address.addressId) {
							that.active = i;
						}
					}
					that.$set(that, 'addressList', addressList);
					that.is_loading = false;
					if (addressList.length) {
						this.$emit('onHaveAddressList', true)
						// this.tapAddress(0, addressList[0].id, addressList[0])
						
						const _default = addressList[0]
						
						// this.active = 0;
						let addressName = _default.province + _default.city + _default.district + _default.detail
						uni.setStorageSync('addressName',addressName)
						uni.setStorageSync('addressObj',_default)
						this.$emit('OnDefaultAddress', _default.id);
					}
				})
			},
			
			getStoreList: function() {
				let longitude = uni.getStorageSync("user_longitude") || ''; //经度
				let latitude = uni.getStorageSync("user_latitude") || ''; //纬度
				if(longitude && latitude) {
					let data = {
						latitude: latitude, //纬度
						longitude: longitude, //经度
						page: 1,
						limit: 10
					}
					storeListApi(data).then(res => {
						let list = res.data || [];
						this.$set(this, 'addressList', list);
					})
					return
				}
				
				uni.getLocation({
					type: 'wgs84',
					success:(res)=> {
						try {
							const { latitude, longitude } = res
							let data = {
								latitude: latitude, //纬度
								longitude: longitude, //经度
								page: 1,
								limit: 10
							}
							storeListApi(data).then(res => {
								let list = res.data || [];
								this.$set(this, 'system_store', list[0]);
							})
							uni.setStorageSync('user_latitude', latitude);
							uni.setStorageSync('user_longitude', longitude);
						} catch {}
					}
				});
				
			},
		}
	}
</script>

<style scoped lang="scss">
	.address-window {
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		min-height: 500rpx;
		z-index: 1000;
		transform: translate3d(0, 100%, 0);
		transition: all .3s cubic-bezier(.25, .5, .5, .9);
	}

	.address-window.on {
		transform: translate3d(0, 0, 0);
	}

	.address-window .title {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		height: 123rpx;
		line-height: 123rpx;
		position: relative;
	}

	.address-window .title .iconfont {
		position: absolute;
		right: 30rpx;
		color: #8a8a8a;
		font-size: 35rpx;
	}

	.address-window .list .item {
		margin-left: 30rpx;
		padding-right: 30rpx;
		border-bottom: 1px solid #eee;
		height: 129rpx;
		font-size: 25rpx;
		color: #333;
	}

	.address-window .list .item .iconfont {
		font-size: 37rpx;
		color: #2c2c2c;
	}

	.address-window .list .item .iconfont.icon-complete {
		font-size: 30rpx;
		color: #fff;
	}

	.address-window .list .item .address {
		width: 560rpx;
	}

	.address-window .list .item .address .name {
		font-size: 28rpx;
		font-weight: bold;
		color: #282828;
		margin-bottom: 4rpx;
	}

	.address-window .list .item .address .name .phone {
		margin-left: 18rpx;
	}

	.address-window .addressBnt {
		font-size: 30rpx;
		font-weight: bold;
		color: #fff;
		width: 690rpx;
		height: 86rpx;
		border-radius: 43rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 85rpx auto;
	}

	.address-window .pictrue {
		width: 414rpx;
		height: 336rpx;
		margin: 0 auto;
	}

	.address-window .pictrue image {
		width: 100%;
		height: 100%;
	}
.mask  {
		z-index: 100 ;
	}
</style>
